同一路徑載入多個頁面元件

現在我們已經能夠靠點擊連結來切換我們想要訪問的路徑，並且利用切換頁面元件的方式達到切換頁面的效果，是不是越來越有單頁式應用程式的感覺了呢！
那麼今天要介紹的是，如果我的單一路徑上要載入不只一個元件的話，
該怎麼做呢？直接來看範例：

//src/components/Menu.vue

<template>
  <div>
    <router-link to="/page">Child1</router-link>
    <router-link to="/page/child2">Child2</router-link>
    <router-link to="/page/child3">Child3</router-link>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      
    }
  }
}
</script>

首先我先將之前 Page.vue 裡的所有連結的部份，都用 Menu.vue 分離出來。

//src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <ul>
      <li>
        <router-link :to="{name: 'HelloWorld'}">Home</router-link>
      </li>
      <li>
        <router-link to="/page">Page</router-link>
      </li>
    </ul>
    <router-view name="Menu"/> //router-view 並給 name 的屬性
    <router-view/> //切換 HelloWorld 和 Page 的頁面的
  </div>
</template>

然後，這些連結我希望只有在 page 這個頁面才要顯示出來，這裡我先加上一個新的 router-view，下面的是切換 HelloWorld 和 Page 的頁面的，而上面的可以看到我有加上 name 的屬性，並且給他 Menu 的值，這就是為了指定這個 router-view 是載入 Menu 這個元件。

//router/index.js

import Menu from '@/components/Menu'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page',
      components: {
        default: Page,
        Menu: Menu //name 為 Menu 的 router-view 會載入 Menu 這個元件
      },
      children: [
        {
          path: '',
          name: 'Child1',
          component: Child1
        },
        {
          path: 'child2',
          name: 'Child2',
          component: Child2
        },
        {
          path: 'child3',
          name: 'Child3',
          component: Child3
        },
      ]
    },
  ]
})

當我們將上述的元件都準備好後，再來要到 index.js 去作路由的設定，改的部份並沒有很多，將原本的 component 改為 components，然後預設的元件為 Page，第二個則是剛剛設定為 name 的 router-view 要載入的元件是為 Menu，這麼一來就可以正確載入兩個頁面元件囉！

那麼，明天再見囉！